<template>
  <div class="heade-container">
    <div class="heade">
      <!-- 设置和扫一扫 -->
        <div class="saoyisao">
          <span @click="shezhi"><i class="iconfont icon-shezhi" style="color:#fff; font-size:30px"></i></span>
          <span ><van-icon color="#fff" size="30px" name="scan" /></span>
        </div>

        <!-- 用户头像部分 -->
      <div class="header">
        <div class="userName">
          <h1>李逍遥</h1>
          <span>声明不息，运动不止。</span>
        </div>
        <div class="userImg">
          <img src="@/assets/userImg.jpg" alt="用户头像">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    shezhi () {
      this.$router.push('/shezhi')
    }
  }
}
</script>

<style lang='less' scoped>
  .heade-container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .heade {
       width: 100%;
        height: 14.4444rem;
        background-image: linear-gradient(to top right,rgb(50, 37, 189),rgb(143, 55, 188),rgb(69, 31, 160));
        padding: 2.2222rem 2.5rem 0;
        border-bottom-right-radius: 5.5556rem;
      .saoyisao {
      width: 100%;
      height: 2.2222rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
      .header {
      width: 100%;
      height: 5.5556rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 1.1111rem 0;
      // 用户名部分
      .userName {
        height: 4.4444rem;
        h1{
          font-size: 1.6667rem;
          font-weight: 700;
          color: #fff;
          margin-bottom: .5556rem;
        }
        span {
          font-size: .8889rem;
          font-weight: 700;
          color: rgb(172, 151, 230);
        }
      }
      // 用户头像
      .userImg {
        width: 4.4444rem;
        height: 4.4444rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    }
  }
</style>
